<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>人物移动</title>
    <style type="text/css">
        body{
            background-color: black;//设置背景颜色
        }
        .img{
            width: 250px;
            height: 250px;
            position: absolute;//设置绝对位置
        }
    </style>
</head>
<body>

<img src="img5/player_right.gif" class="img" style="top: 0px; left:0px;"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>

    function Change() {
        $("img").off("dblclick"); //先移除双击事件
        $("img").on("dblclick", function () { //再绑定新的双击事件
            $("img").attr("src", "img5/player2.gif");
            $("img").off("dblclick"); //移除第二个双击事件
            $("img").on("dblclick", function () { //再绑定还原双击事件
                $("img").attr("src", "img5/player_right.gif");
            Change();
            })
        })
    }
    //switch实现
    function move(){
        $(window).keydown(function(e){//键盘按下的事件，用e来接收
            let top = parseInt($("img").css("top"));
            let left = parseInt($("img").css("left"));
            switch(e.keyCode){
                case 87:
                    $("img").css("top",top - 50);
                    break;
                case 83:
                    $("img").css("top",top + 50);
                    break;
                case 65:
                    if($("img").attr("src") == "img5/player2.gif"||$("img").attr("src","img5/player_left.gif"))
                    $("img").css("left",left - 50);
                    break;
                case 68:
                    if($("img").attr("src") == "img5/player2.gif"||$("img").attr("src","img5/player_right.gif"))
                    $("img").css("left",left + 50);
                    break;
                    default: break;
            }
        })
    }

    $(function(){
        Change();
        move();
    })

    $(document).mousemove(function(e) {
        $('.img').stop().animate({
            left: e.pageX - $('.img').width() / 2,
            top: e.pageY - $('.img').height() / 2
        }, 2000);
    });

</script>
</body>
</html>